<template>
  <div class="specialalbum">
    <div style="position:relative;left:1150px;display: flex;">
      <div :class="show==index?'b':''" style="width:20px;height:20px;display:flex;align-items:center;justify-content: center;" class="p" v-for="(item,index) in iconarr" :key="index">
        <i class="iconfont" :class="item" @click="geticon(index)"></i>
      </div>
    </div>
    <div class="main" v-if="show==2">
      <div style="display:flex;" class="plist">
        <img src="@/assets/buh.png" alt="" style="width:150px;height:150px;">
      </div>
      <div class="musiclist">
        <div style="display:flex;">
          <span style="font-weight: 900;">热门50首</span>
          <div style="margin-left:30px;display: flex;align-items: center;">
            <i class="iconfont icon-bofang2 i1"></i>&nbsp;&nbsp;<span style="font-size:8px;opacity: 0.3;">|</span>&nbsp;&nbsp;<i class="iconfont icon-shoucangjia i2"></i>
          </div>
        </div>
        <div class="list" v-if="examine">
          <div @dblclick="getsong1(item.id,item.name,item.ar,item.al.picUrl,item.dt)" style="" class="daughter" v-for="(item,index) in Thefirstfive" :key="item.id" :class="index%2==0?'c':''">
            <span style="font-size:12px;opacity: 0.5;">{{index+1}}</span>
            <i class="iconfont icon-aixin i3"></i>
            <i class="iconfont icon-xiazai i4"></i>
            <span class="span1">{{item.name}}</span>
            <span class="span2" v-for="(item1,index1) in timearr" :key="index1" v-show="index==index1">{{item1}}</span>
          </div>
          <div style="" class="Viewall">
            <span v-show="examine" @click="getexamine">查看全部50首 ></span>
          </div>
        </div>
        <div class="list" v-else>
          <div @dblclick="getsong1(item.id,item.name,item.ar,item.al.picUrl,item.dt)" style="" class="daughter" v-for="(item,index) in examinearr" :key="item.id" :class="index%2==0?'c':''">
            <span style="font-size:12px;opacity: 0.5;">01</span>
            <i class="iconfont icon-aixin i3"></i>
            <i class="iconfont icon-xiazai i4"></i>
            <span class="span1">{{item.name}}</span>
            <span class="span2" v-for="(item1,index1) in timearr" :key="index1" v-show="index==index1">{{item1}}</span>
          </div>
        </div>
      </div>

    </div>
    <Artistalbum v-else-if="show==1" />
    <Arrangementmode v-else-if="show==0" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus.js'
import Artistalbum from '@/components/Home/Singer/Artistalbum.vue'
import Arrangementmode from '@/components/Home/Singer/Arrangementmode.vue'
export default {
  name: 'specialalbum',
  computed: {
    ...mapState({
      hotSongs: state => state.Singger.hotSongs
    })
  },
  created() {
    this.$store.dispatch('getGetsingerdetails', { id: this.$route.query.id })
  },
  components: {
    Artistalbum,
    Arrangementmode
  },
  data() {
    return {
      show: 2,
      iconarr: ['icon-fenlei1', 'icon-fenlei2', 'icon-fenlei'],
      geticonarr: [],
      Thefirstfive: [],
      time: [],
      minute: [],
      minute1: [],
      second: [],
      second1: [],
      timearr: [],
      examine: true,
      examinearr: [],
      time1: [],
      minute2: [],
      minute3: [],
      second2: [],
      second3: [],
      timearr1: []
    }
  },
  mounted() {},
  methods: {
    //点击切换图标
    geticon(e) {
      this.show = e
    },
    getexamine() {
      this.examine = false
    },
    getsong1(e, n, v, m, time) {
      Bus.$emit('music', e, n, v, m, time)
    }
  },
  watch: {
    hotSongs: {
      handler(v, o) {
        v.map(val => {
          this.geticonarr.push(val)
        })
      }
    },
    geticonarr: {
      handler(v, o) {
        for (let i = 0; i < 10; i++) {
          this.Thefirstfive.push(v[i])
        }
      }
    },
    Thefirstfive: {
      handler(v, o) {
        this.time = v.map(val => {
          return val.dt
        })
      }
    },
    time: {
      handler(v, o) {
        this.minute = v.map(val => {
          let m = new Date(val)
          return m.getMinutes()
        })
        this.second = v.map(val => {
          let s = new Date(val)
          return s.getSeconds()
        })
      }
    },
    minute: {
      handler(v, o) {
        this.minute1 = v.map(val => {
          if (val < 9) {
            return '0' + val
          } else {
            return val
          }
        })
      }
    },
    second: {
      handler(v, o) {
        this.second1 = v.map(val => {
          if (val < 9) {
            return '0' + val
          } else {
            return val
          }
        })
      }
    },
    second1: {
      handler(v, o) {
        for (let i = 0; i < v.length; i++) {
          this.timearr.push(this.minute1[i] + ':' + this.second1[i])
        }
      }
    },
    //点击查看全部歌曲后，处理全部歌曲的时间
    examine: {
      handler(v, o) {
        this.hotSongs.map(val => {
          this.examinearr.push(val)
        })
      }
    },
    examinearr: {
      handler(v, o) {
        this.time1 = v.map(val => {
          return val.dt
        })
      }
    },
    time1: {
      handler(v, o) {
        this.minute2 = v.map(val => {
          let m = new Date(val)
          return m.getMinutes()
        })
        this.second2 = v.map(val => {
          let s = new Date(val)
          return s.getSeconds()
        })
      }
    },
    minute2: {
      handler(v, o) {
        this.minute3 = v.map(val => {
          if (val < 9) {
            return '0' + val
          } else {
            return val
          }
        })
      }
    },
    second2: {
      handler(v, o) {
        this.second3 = v.map(val => {
          if (val < 9) {
            return '0' + val
          } else {
            return val
          }
        })
      }
    },
    second3: {
      handler(v, o) {
        for (let i = 0; i < v.length; i++) {
          this.timearr1.push(this.minute3[i] + ':' + this.second3[i])
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.specialalbum {
  margin-top: 20px;
  .p {
    background-color: rgb(234, 235, 234);
    opacity: 0.6;
  }
  .p:hover {
    cursor: pointer;
  }
  .b {
    background-color: rgb(156, 155, 155);
    color: #fff;
  }
  .main {
    display: flex;
    .plist {
    }
    .musiclist {
      margin-left: 0px;
      .i1 {
        opacity: 0.6;
      }
      .i2 {
        opacity: 0.6;
      }
      .i1:hover {
        cursor: pointer;
        opacity: 1;
      }
      .i2:hover {
        cursor: pointer;
        opacity: 1;
      }
      .list {
        margin-top: 30px;
        .c {
          background-color: rgb(250, 249, 248);
        }
        .daughter {
          width: 1100px;
          padding: 10px;
          display: flex;
          align-items: center;
          .i3 {
            margin-left: 10px;
            opacity: 0.5;
            font-size: 18px;
          }
          .i4 {
            margin-left: 10px;
            opacity: 0.5;
            font-size: 18px;
          }
          .i3:hover {
            cursor: pointer;
            opacity: 1;
          }
          .i4:hover {
            cursor: pointer;
            opacity: 1;
          }
          .span1 {
            opacity: 1;
            margin-left: 10px;
            font-size: 14px;
            width: 400px;
          }
          .span2 {
            margin-left: 500px;
            opacity: 0.5;
            font-size: 13px;
          }
        }
        .daughter:hover {
          background-color: rgb(244, 246, 247);
        }
        .Viewall {
          width: 1100px;
          padding: 10px;
          display: flex;
          align-items: center;
          span {
            font-size: 4px;
            opacity: 0.5;
            margin-left: 950px;
          }
          span:hover {
            cursor: pointer;
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>